<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物联网设备配网</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }

        .container {
            max-width: 500px;
            margin: 20px auto;
            padding: 15px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            font-size: 14px;
            margin-bottom: 5px;
            color: #555;
        }

        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-sizing: border-box;
            margin-bottom: 8px;
        }

        input[type="text"]:focus, input[type="password"]:focus {
            border-color: #007bff;
            outline: none;
        }

        .section-title {
            background-color: #f1f1f1;
            padding: 8px;
            font-size: 16px;
            font-weight: bold;
            border-radius: 6px;
            margin-bottom: 12px;
            cursor: pointer;
        }

        .optional {
            font-size: 12px;
            color: #777;
        }

        .collapsed {
            display: none;
        }

        button {
            width: 100%;
            padding: 14px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        button:hover:not(:disabled) {
            background-color: #0056b3;
        }

        @media (max-width: 480px) {
            .container {
                padding: 10px;
            }

            h1 {
                font-size: 20px;
                margin-bottom: 15px;
            }

            button {
                font-size: 16px;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <h1>设备配网</h1>
    <form id="wifiForm">
        <div class="section-title">Wi-Fi 配置 <span class="optional">(可选)</span></div>
        <div class="form-group" id="wifiSection">
            <label for="ssid">Wi-Fi SSID</label>
            <input type="text" id="ssid" name="ssid" placeholder="请输入Wi-Fi名称">
        </div>
        <div class="form-group" id="wifiPasswordSection">
            <label for="pwd">Wi-Fi 密码 <span class="optional">(可选)</span></label>
            <input type="password" id="pwd" name="pwd" placeholder="请输入Wi-Fi密码">
        </div>

        <div class="section-title" onclick="toggleSection('mqttSection')">MQTT 配置 <span class="optional">(可选)</span></div>
        <div class="collapsed" id="mqttSection">
            <div class="form-group">
                <label for="mqtt_url">MQTT 服务器 URL</label>
                <input type="text" id="mqtt_url" name="mqtt_url" placeholder="请输入MQTT服务器URL">
            </div>
            <div class="form-group">
                <label for="mqtt_username">MQTT 用户名 <span class="optional">(可选)</span></label>
                <input type="text" id="mqtt_username" name="mqtt_username" placeholder="请输入MQTT用户名">
            </div>
            <div class="form-group">
                <label for="mqtt_pwd">MQTT 密码 <span class="optional">(可选)</span></label>
                <input type="password" id="mqtt_pwd" name="mqtt_pwd" placeholder="请输入MQTT密码">
            </div>
            <div class="form-group">
                <label for="mqtt_down_topic">MQTT 下发 Topic <span class="optional">(可选)</span></label>
                <input type="text" id="mqtt_down_topic" name="mqtt_down_topic" placeholder="请输入下发Topic">
            </div>
            <div class="form-group">
                <label for="mqtt_up_topic">MQTT 上报 Topic <span class="optional">(可选)</span></label>
                <input type="text" id="mqtt_up_topic" name="mqtt_up_topic" placeholder="请输入上报Topic">
            </div>
            <div class="form-group">
                <label for="mqtt_ota_topic">MQTT OTA Topic <span class="optional">(可选)</span></label>
                <input type="text" id="mqtt_ota_topic" name="mqtt_ota_topic" placeholder="请输入OTA Topic">
            </div>
        </div>

        <div class="section-title" onclick="toggleSection('otaSection')">OTA 配置 <span class="optional">(可选)</span></div>
        <div class="collapsed" id="otaSection">
            <div class="form-group">
                <label for="ota_url">OTA URL</label>
                <input type="text" id="ota_url" name="ota_url" placeholder="请输入OTA服务器URL">
            </div>
        </div>

        <button type="submit" id="submitButton">配置设备</button>
    </form>
</div>

<script>
    // 切换折叠状态的函数
    function toggleSection(sectionId) {
        const section = document.getElementById(sectionId);
        section.classList.toggle('collapsed');
    }

    // 监听表单提交事件
    document.getElementById('wifiForm').addEventListener('submit', function(event) {
        event.preventDefault();

        // 禁用按钮，防止多次点击
        const submitButton = document.getElementById('submitButton');
        submitButton.disabled = true;

        // 获取表单数据
        const ssid = document.getElementById('ssid').value;
        const pwd = document.getElementById('pwd').value;
        const mqttUrl = document.getElementById('mqtt_url').value;
        const mqttUsername = document.getElementById('mqtt_username').value;
        const mqttPwd = document.getElementById('mqtt_pwd').value;
        const mqttDownTopic = document.getElementById('mqtt_down_topic').value;
        const mqttUpTopic = document.getElementById('mqtt_up_topic').value;
        const mqttOtaTopic = document.getElementById('mqtt_ota_topic').value;
        const otaUrl = document.getElementById('ota_url').value;

        // 确保至少有一个配置项（Wi-Fi、MQTT、OTA）填写
        if (!ssid && !mqttUrl && !otaUrl) {
            alert('请至少填写 Wi-Fi 配置、MQTT 配置 或 OTA 配置中的一个。');
            submitButton.disabled = false;
            return;
        }

        // 检查 MQTT 配置的条件：
        // 1. 如果有 mqtt_username 或 mqtt_pwd，则 mqtt_url 必须填写
        // 2. 如果输入 mqtt_pwd，则 mqtt_username 必须填写
        if ((mqttUsername || mqttPwd) && !mqttUrl) {
            alert('如果输入 MQTT 用户名或密码，必须填写 MQTT 服务器 URL');
            submitButton.disabled = false; // 恢复按钮可点击
            return;
        }
        if (mqttPwd && !mqttUsername) {
            alert('如果输入 MQTT 密码，必须填写 MQTT 用户名');
            submitButton.disabled = false; // 恢复按钮可点击
            return;
        }

        // 构造请求的数据对象
        const data = {
            ssid: ssid,
            pwd: pwd,
            mqtt_url: mqttUrl,
            mqtt_username: mqttUsername,
            mqtt_pwd: mqttPwd,
            mqtt_down_topic: mqttDownTopic,
            mqtt_up_topic: mqttUpTopic,
            mqtt_ota_topic: mqttOtaTopic,
            ota_url: otaUrl
        };

        // 发起HTTP请求
        fetch('/config', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                alert('配网成功！');
            } else if (data.status === 'failure') {
                alert('配网失败：' + data.message);
            }
        })
        .catch(error => {
            console.error('请求错误:', error);
            alert('请求失败，请检查网络连接。');
        })
        .finally(() => {
            // 请求结束后恢复按钮的可点击状态
            submitButton.disabled = false;
        });
    });
</script>

</body>
</html>
